<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目名称:" class="font">
              <a-input v-model="queryParam.pjtname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="行政区:" class="font">
              <a-select v-model="queryParam.city" @change="changeCity" :disabled="isInput">
                <a-select-option :value="item.no  " v-for="(item,index) in citydata" :key="index">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <a-select v-model="queryParam.area " :disabled="isInput2">
                <a-select-option :value="item.no" v-for="(item,index) in xiandata" :key="index">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                class="cz"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      bordered
      rowKey="id"
      ref="table"
      :scroll="{ x: 0 }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
    >
      <span slot="pjtcount" slot-scope="text,record">
        <a @click="detaildata(text,record,1)">{{ text }}</a>
      </span>
      <span slot="xmName" slot-scope="text,record">
        <a @click="detaildata(text,record,2)">{{ text }}</a>
      </span>
      <span slot="action" slot-scope="text, record">
        <a  v-if="record.sum != 1"  @click="detaildata(text,record,2)">查看明细</a>
      </span>
    </a-table>
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <a-pagination
         @showSizeChange="handleTableChange"
         :showSizeChanger="true"
        style="padding-top: 16px; padding-right: 20px"
        v-model="ipagination.current"
        @change="pagechange1"
        :show-total="(total) => `共 ${ipagination.total} 条`"
        :total="ipagination.total"
        show-quick-jumper
      />
    </div>
  </div>
</template>

<script>
import { expireAlarmlist,fkCitylist,cityQueryXian } from "../../api/api";
import {tableminx} from '../../mixins/tablemix'
export default {
  mixins:[tableminx],
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return t.sum != 1 ? parseInt(index) + 1 : "合计";
          },
        },
        {
          title: "项目编号",
          dataIndex: "xmXmbh",
          align: "left",
          scopedSlots: { customRender: "pjtcount" },
          width: 150,
        },
        {
          title: "项目名称",
          dataIndex: "xmName",
          align: "left",
          scopedSlots: { customRender: "xmName" },
          width: 200,
        },
        {
          title: "行政区",
          dataIndex: "xmXzqmc",
          align: "left",
          width: 150,
        },
        {
          title: "备案编号",
          dataIndex: "xmBabh",
          align: "left",
          width: 100,
        },
        {
          title: "项目开始时间",
          dataIndex: "xmSxqxstart",
          align: "left",
          width: 100,
        },
        {
          title: "项目结束时间",
          dataIndex: "xmSxqxend",
          align: "left",
          width: 100,
        },
        {
          title: "项目当前用途",
          dataIndex: "xmSsnylx",
          customRender: (xmSsnylx, record, index) => {
            var ssnylxs = record.xmSsnylx;
            console.log(ssnylxs, "1111");
            var ssnylstr = "";
            if (ssnylxs == null || ssnylxs == "") {
              return "";
            } else {
              var ssnyssz = ssnylxs.split(",");
              if (ssnyssz.length > 0) {
                for (var i = 0; i < ssnyssz.length; i++) {
                  if (ssnyssz[i].length > 0) {
                    if (ssnyssz[i] == "1") {
                      ssnylstr += "作物种植设施农用地  ";
                    } else if (ssnyssz[i] == "2") {
                      ssnylstr += "畜禽水产养殖设施农用地  ";
                    }
                  }
                }
              }
              return ssnylstr;
            }
          },
          align: "left",
          width: 100,
        },
        {
          title: "设施农业申请用地面积(公顷)",
          dataIndex: "xmZydmj",
          align: "left",
          width: 200,
        },
        {
          title: "生产设施用地面积(公顷)",
          dataIndex: "xmScssydmj",
          align: "left",
          width: 170,
        },
        {
          title: "辅助设施用地(公顷)",
          dataIndex: "xmFzssydmj",
          width: 140,
          align: "left",
        },
        {
          title: "操作",
          width: 120,
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      selectedRowKeys: [],
      dataSource: [],
      iscont: false,
      qx:false,
    };
  },
  mounted() {
    this.dataList();
    this.getCtiydata();
    this.changeCity()
  },
  methods: {
    //获取报件箱列表数据
    async dataList() {
      if(this.user.role  == 'xian' || this.user.role  == 'shi' )
       {
        this.queryParam.area =this.user.role == 'xian' ?  this.user.fkDept : this.queryParam.area
        this.queryParam.city = this.user.fkDept.slice(0,4)
        this.isInput2 = this.user.role == 'xian' ? true : false
        this.isInput = true
       }
      const pag = this.ipagination;
      const params = {
        keyword:this.queryParam.pjtname,
        pageNo: pag.current,
        pageSize: pag.pageSize,
        city:this.queryParam.city,
        area:this.queryParam.area,
        status:0
      };
      const data = await expireAlarmlist(params);
      if (data.code == 200) {
        const res = data.result.records;
        this.dataSource = res;
        let sum = res.reduce(
          (accumulator, currentValue) => accumulator + currentValue.xmZydmj,
          0
        );
        let sum1 = res.reduce(
          (accumulator, currentValue) => accumulator + currentValue.xmScssydmj,
          0
        );
        let sum2 = res.reduce(
          (accumulator, currentValue) => accumulator + currentValue.xmFzssydmj,
          0
        );
        this.dataSource.push({
          dataSec: "",
          xmZydmj: sum.toFixed(4),
          xmScssydmj: sum1.toFixed(4),
          xmFzssydmj: sum2.toFixed(4),
          sum: "1",
        });
        pag.total = data.result.total;
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination.current = pagination;
      this.ipagination.pageSize = filters;
      this.dataList();
      this.selectedRowKeys = []
      this.qx = false
    },
    //全选/取消事件
    dataSelectChange(e) {
      var arr = [];
      this.dataSource.map((item, index) => {
        arr.push(index);
      });
      this.selectedRowKeys = e.target.checked == true ? arr : [];
    },
    //查询
    searchQuery() {
      this.dataList();
    },
    //重置
    searchReset() {
      this.queryParam = {area:'',city:''}  
      this.dataList();
    },
    //跳转到设施农业用地详情
    detaildata(text,data,index) {
      this.$router.push({
        path: "/admin/agriculand",
        query: {
          type: "detail",
          id:data.dataSec,
          diff:"",
        },
      });
    },
    //删除
    deleteAll() {
      this.$warning({
        content: "请选择操作的数据",
        okText: "确定",
      });
    },
    //新增
    dataAdd() {
      this.$router.push({
        path: "/admin/agriculand",
        query: {
          type: "add",
        },
      });
    },
    //获取行政区
   async getCtiydata(){
        const res = await fkCitylist()
        const arr = res.result
       arr.unshift({
          name:'全部',
          no:''
        })
        this.citydata = arr
    },
    //选择行政区获取县级数据
    async changeCity(e){
      console.log(e,'eee');
        const data = await cityQueryXian({cityNo:e == undefined ? this.user.fkDept.slice(0,4) : e})
        const brr = data.result
        brr.unshift({
          name:'全部',
          no:''
        })
        this.xiandata = brr
    },
    pagechange1(start, end) {
      this.ipagination.pageNo = start;
      this.ipagination.pageSize = end;
      this.dataList();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-table-align-center {
  //   background: #e4f6ff !important;
  font-weight: bold !important;
}
/deep/ .ant-table-align-left {
  font-weight: bold !important;
}
.font {
  font-weight: 700;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  color: #4d5259;
}
.gongneng {
  padding-bottom: 15px;
  .shangb {
    margin-left: 50px;
  }
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 10px;
}
.cz {
  margin-left: 8px;
}
.table-page-search-wrapper {
  margin-top: 10px;
}
/deep/ .ant-table-body {
  //样式穿透
  overflow-x: auto !important;
}
</style>